<template>
  <div class="AppHeader" v-if="showHead">
    <div class="left" @click.stop="AppBack" v-if="leftShow"></div>
    <div class="text">{{$t(text)}}</div>
    <div class="right"></div>
  </div>
</template>

<script>
  export default {
    name: "app-header",
    data() {
      return {
        leftShow: false, //返回箭头显示
        showHead: true, //头部导航是否显示
        text: "app"  //默认文字
      }
    },
    methods: {
      AppBack() {  //后退按钮
        this.$router.go(-1);
      },
      iShowHead() { //隐藏头部导航
        let showHead = this.$utils.getUrlKey('showHead');
        showHead ? this.showHead = false : this.showHead = true;
      }
    },
    watch: {
      $route(to, from) {
        this.iShowHead();
        this.text = to.name; //设置文字
        document.title = this.$t(to.name);
        if (to.meta.leftShow == false) { //是否显示左边返回按钮
          this.leftShow = false;
        } else {
          this.leftShow = true;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppHeader {
    width: 100%;
    height: 45px;
    display: flex;
    padding: 0 16px;
    background: white;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;

    .left {
      display: inline-block;
      width: 13px;
      height: 13px;
      border-top: 3px solid #000;
      border-right: 3px solid #000;
      transform: rotate(-135deg);
    }
    .text {
      flex: 1;
      width: 100%;
      text-align: center;
      display: inline-block;
      font-size: 18px;
      color: #000;
      padding: 0 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
    }
  }
</style>
